<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <div>vue示例内容</div>
        <my-footer></my-footer>
    </div>


    <!---父组件-->
    <template id="footer">
        <div>
            父组件内容
            <div>您点击了 {{clickName}} 组件</div>
            <footer-item @danji="clickChange" :n123="item.title" v-for="(item, index) in items"
                :key="index">
                <h1 slot="slot3">这是给插槽的内容1</h1>
                <h3 slot="slot1">这是给插槽的内容2</h3>
                <h5 slot="slot2">这是给插槽的内容3</h5>
            </footer-item>
        </div>
    </template>

    <!--子组件-->
    <template id="footerItem">

        <div>
            子组件内容
            <a @click="clickDiv()">
                {{n123}}
                <slot name="slot1"></slot>
                <slot name="slot2"></slot>
                <slot name="slot3"></slot>
                <h1>这是子组件底部</h1>
            </a>
        </div>
    </template>


</body>
<script>

    //  定义子组件
    var footerItem = {
        template: "#footerItem",
        data() {
            return {
                // name:"首页"
            }
        },
        props: ["n123"],
        methods: {
            clickDiv() {
                this.$emit("danji", this.n123);
                // alert("您点击了"+this.n123+"子组件");
            }
        },
    }
    //   定义父组件
    var footer = {
        template: "#footer",
        data() {
            return {
                items: [
                    { title: "首页" },
                    { title: "购物车" },
                    { title: "我的" },
                ],
                clickName: "",
            }
        },
        components: {
            "FooterItem": footerItem
        },
        methods: {
            clickChange(value) {
                this.clickName = value;
            }
        }
    }


    new Vue({
        el: "#app",
        components: {
            "MyFooter": footer
        }
    });


</script>

</html>